<template>
    <el-scrollbar class="container">
        <el-collapse v-model="activeNames">
            <el-collapse-item v-for="(vo,i) in components" key="title"
                              :title="vo.title" :name="i">

                <el-row class="p15">
                    <el-col :span="8" v-for="voo in vo.list" :key="voo.title">
                        <div class="com_li" @click="btnSelect(voo)">
                            <span class="f28 f_regular">
                                <mi-icon :name="voo.icon"></mi-icon>
                            </span>
                            <span class="f12">{{ voo.title }}</span>
                        </div>
                    </el-col>

                </el-row>

            </el-collapse-item>

        </el-collapse>
    </el-scrollbar>
</template>

<script setup lang="ts">

import {inject} from "vue";
import {articleLi, bannerLi, goodsLi, gridLi, imageLi, sellCard, tabBarLi} from "@/views/site/diy/diy";

const activeNames = [0,1]

const components = [
    {
        title: '基础组件',
        list: [
            {
                title: '轮播图',
                icon: 'fas fa-ad',
                name:'banner',
                list:[{...bannerLi}, {...bannerLi}],
                config:{},
                class:{col_num: 'col_4',radius:'right'},
                style:{margin_bottom: 0, margin_x: 0, height:150},
            },
            {
                title: '网格',
                name:"grid",
                icon: 'fas fa-th',
                list:[{...gridLi}, {...gridLi}, {...gridLi}, {...gridLi}],
                config:{},
                class:{col_num: 'col_4',radius:'right'},
                style:{margin_bottom: 0, margin_x: 0,},
            },
            {
                title: '搜索框',
                icon: 'fas fa-search',
                name:"search",
                list:[],
                config:{},
                class:{radius:'right'},
                style:{margin_bottom: 0, margin_x: 0, placeholder:'请输入关键字搜索', container_background:'#f1f1f1', input_background:'#fff'},
            },
            {
                title: '图片魔方',
                icon: 'fas fa-images',
                name: "image",
                list:[{...imageLi}, {...imageLi}, {...imageLi}, {...imageLi}],
                config:{},
                class:{
                    col_num: 'col_4',
                    radius:'right',
                    image_space:'no_image_space'
                },
                style:{margin_bottom: 0, margin_x: 0,},
            },
            {
                title: '文章列表',
                icon: 'fas fa-th-list',
                name:"article",
                list:[{...articleLi}],
                config:{num:2, cate_id:0},
                class:{radius:'right'},
                style:{margin_bottom: 0, margin_x: 0,},
            },
            {
                title: '通知公告',
                icon: 'fas fa-bullhorn',
                name:"notice"
            },
            {
                title: '标题栏',
                icon: 'fas fa-heading',
                name:"header",
                config:{title:'标题', sub_title:'副标题'},
                style: {margin_bottom: 0, margin_x: 0, background:'#fff',title_color:'#333', sub_title_color:'#999'},
                class: {radius:'right', tpl:'tpl_1'},
            },
            // {
            //     title: '底部导航',
            //     icon: 'fas fa-bars',
            //     name:"tab_bar",
            //     list:[{...tabBarLi},{...tabBarLi}, {...tabBarLi}, {...tabBarLi}],
            //     config:{},
            //     class:{radius:'right'},
            //     style:{margin_bottom: 0, margin_x: 0,},
            // },
            // {
            //     title: '图文',
            //     type: "2",
            //     // icon: 'icontupian',
            //     // base: { ...base, sc:[{p: require('@/assets/images/s2_1.png')}, {p: require('@/assets/images/s2_2.png')}]},
            //     // content: { text: { t:'描述文字',...text }, img },
            //     // title: { t:'图文模块标题',...text }
            // }
        ]
    },

    {
        title: '商城组件',
        list: [
            {
                title: '商品分类导航',
                icon: 'fas fa-th-large',
                name:"goods_cate",
                class: {radius:'right'},
                style:{margin_bottom: 0, margin_x: 0,background:'none',color:'#fff',},
            },
            {
                title: '商品列表',
                icon: 'fas fa-th-large',
                name:"goods",
                list:[{...goodsLi}, {...goodsLi}],
                config:{source:'auto',num:3},
                class:{col_num: 'col_1',radius:'right'},
                style:{margin_bottom: 0, margin_x: 0,},
            },
            {
                title: '促销卡片',
                icon: 'fas fa-box',
                name:"sell_card",
                list:[sellCard],
                config:{num: 6},
                class:{col_num: 'col_3',radius:'right'},
                style:{margin_bottom: 0, margin_x: 0,background:'#fff'},
            },
            // {
            //     title: '促销卡片（多）',
            //     icon: 'fas fa-box-open',
            //     name:"sell_card_2",
            //     list:[{...gridLi}, {...gridLi}, {...gridLi}, {...gridLi}],
            //     config:{},
            //     class:{col_num: 'col_4',radius:'right'},
            //     style:{margin_bottom: 0, margin_x: 0,background:'#fff'},
            // },
            {
                title: '拼团列表',
                icon: 'fas fa-cubes',
                name:"group",
                list:[{...gridLi}, {...gridLi}, {...gridLi}, {...gridLi}],
                config:{},
                class:{col_num: 'col_4',radius:'right'},
                style:{margin_bottom: 0, margin_x: 0,},
            },
            {
                title: '秒杀列表',
                icon: 'fas fa-clock',
                name:"seckill",
                list:[{...gridLi}, {...gridLi}, {...gridLi}, {...gridLi}],
                config:{},
                class:{col_num: 'col_4',radius:'right'},
                style:{margin_bottom: 0, margin_x: 0,},
            },
            {
                title: '小程序直播',
                icon: 'fas fa-photo-video',
                name:"mp_live",
                list:[{...gridLi}, {...gridLi}, {...gridLi}, {...gridLi}],
                config:{},
                class:{col_num: 'col_4',radius:'right'},
                style:{margin_bottom: 0, margin_x: 0,},
            },
        ]
    },

]

const selectedComponent : any = inject("selectedComponent")
const page : any = inject('page')

const btnSelect = (item: any) => {
    const index = selectedComponent.index
    page.info.content.components.splice(index+1, 0, item)
    // 更新选中的组件为新插入的组件
    selectedComponent.index = index+1
    selectedComponent.info = page.info.content.components[index+1]
}

</script>

<style scoped lang="scss">
.container{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    .com_li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        cursor: pointer;
        &:hover{
            background-color: #f9f9f9;
        }
    }
}
</style>
